{% extends "base.html" %}

{% block title %}{{ database }}: {{ table }}{% endblock %}

{% block extra_head %}
{{- super() -}}
<style>
@media only screen and (max-width: 576px) {
{% for column in columns %}
    .rows-and-columns td:nth-of-type({{ loop.index }}):before { content: "{{ column|escape_css_string }}"; }
{% endfor %}
}
</style>
{% endblock %}

{% block body_class %}row db-{{ database|to_css_class }} table-{{ table|to_css_class }}{% endblock %}

{% block crumbs %}
{{ crumbs.nav(request=request, database=database, table=table) }}
{% endblock %}

{% block content %}
<h1 style="padding-left: 10px; border-left: 10px solid #{{ database_color(database) }}">{{ table }}: {{ ', '.join(primary_key_values) }}{% if private %} 🔒{% endif %}</h1>

{% block description_source_license %}{% include "_description_source_license.html" %}{% endblock %}

<p>This data as {% for name, url in renderers.items() %}<a href="{{ url }}">{{ name }}</a>{{ ", " if not loop.last }}{% endfor %}</p>

{% include custom_table_templates %}

{% if foreign_key_tables %}
    <h2>Links from other tables</h2>
    <ul>
        {% for other in foreign_key_tables %}
            <li>
                <a href="{{ other.link }}">
                    {{ "{:,}".format(other.count) }} row{% if other.count == 1 %}{% else %}s{% endif %}</a>
                from {{ other.other_column }} in {{ other.other_table }}
            </li>
        {% endfor %}
    </ul>
{% endif %}

{% endblock %}
